<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>查看加粉数量</title>
    <link type="text/css" rel="stylesheet" th:href="@{'/js/jedate/skin/jedate.css'}"/>
    <script type=text/javascript th:src="@{'/js/jedate/jquery-1.7.2.js'}"></script>
    <script type=text/javascript th:src="@{'/js/jedate/jquery.jedate.min.js'}"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>

<form method="get" th:action="@{report}">


    开始时间:<input type="text" readonly="readonly" class="workinput wicon" name="startDate" id="start"
                th:value="${start}"/>
    结束时间:<input type="text" readonly="readonly" class="workinput wicon" name="endDate" id="end" th:value="${end}"/>
    <input type="submit" value="查询"/>

    <br/>

    总计加粉数量:<span th:text="${counts}" style="color: red;"></span>

    <input type="hidden" name="wxh" th:value="${param.wxh[0]}"/>

    <br/>

    <div id="main" style="width: 100%;height:400px;"></div>

</form>

</body>
</html>
<script type="text/javascript" th:inline="javascript">

    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    $("#start").jeDate({
        format: "YYYY-MM-DD hh:mm:ss"
    })
    $("#end").jeDate({
        format: "YYYY-MM-DD hh:mm:ss"
    })
    var data = eval([[${arr}]])

    option = {
        tooltip: {
            show: true
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);

                var val = date.Format('yyyy-MM-dd hh:mm:ss');
                val = val + " 粉丝数:" + params.value[1];
                return val;
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            name: '加粉时间',
            splitNumber: [[${arrLength}]],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '粉丝数量',
            minInterval: 1,
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        }]
    };
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
</script>